<template>
  <view v-if="shenheStatus == 0" class="page-container">
    <template v-if="configData.peopleConfig">
      <view class="order-form">
        <view class="form-item">
          <view
            class="order-msg"
            v-if="appointData.day.day && appointData.time && appointData.people"
            >{{
              `${appointData.day.day} ${' ' + appointData.time}，${
                appointData.people + '人'
              }`
            }}</view
          >
          <view
            class="order-msg"
            style="color: #c0c4cc; font-weight: 300"
            v-else
            >请选择日期、时间、人数</view
          >
          <view class="edit-order" @click="editAppointMsg">修改</view>
        </view>

        <view class="form-item">
          <u-input v-model="form.name" type="text" placeholder="用餐人姓名" />
        </view>
        <view class="form-item">
          <u-input
            v-model="form.mobile"
            type="number"
            maxlength="11"
            placeholder="用餐人电话"
          />
          <view class="wrap">
            <u-toast ref="uToast"></u-toast>
            <u-verification-code
              :seconds="seconds"
              ref="uCode"
              @change="codeChange"
            ></u-verification-code>
            <view class="code-btn" @click="getCode">{{ tips }}</view>
          </view>
        </view>
        <view class="form-item">
          <u-input
            v-model="form.code"
            maxlength="6"
            type="number"
            placeholder="验证码"
          />
        </view>
      </view>
      <view class="remark-box">
        <u-input
          v-model="form.remark"
          type="textarea"
          maxlength="25"
          height="200"
          :auto-height="true"
          placeholder="留言备注，我们将尽量安排"
        />
      </view>
      <view class="discount-box">
        <view>商家服务</view>
        <text>{{ shop.service }}</text>
      </view>
      <view class="foot-section">
        <u-button
          size="medium"
          shape="circle"
          :custom-style="{ width: '91.47vw;' }"
          type="primary"
          :disabled="!form.mobile || !form.name || !form.code"
          @click="submitAppoint"
          >立即订座</u-button
        >
      </view>
    </template>

    <appointPopup
      v-if="showAppointPopup"
      :editData="appointData"
      :configData="configData"
      @handleConfirmBtn="handleConfirmBtn"
      @close="closePopup"
    ></appointPopup>
    <u-toast ref="uToast" />
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import appointPopup from '../components/appointPopup/popup.vue';

export default {
  components: {
    appointPopup,
    Shenhe,
  },
  data() {
    return {
      showAppointPopup: false, // 是否展示预约选择弹框组件
      from: '', // 页面前置来源
      form: {
        name: '',
        mobile: '',
        code: '',
        remark: '',
      },

      seconds: 60,
      tips: '获取验证码',
      appointData: {},
      configData: {},
      hadAppoint: false,
      shop: {},
      routeData: {},
    };
  },
  filters: {},
  onLoad() {
    this.getShopInfo();
    this.getAppointmentConfig();
  },
  onShow() {},
  methods: {
    getShopInfo() {
      this.$allrequest.alipay.getShopInfo({},true).then(res => {
        if (!res.code) {
          this.shop = res.data;
        }
      });
    },
    // 获取预约配置
    getAppointmentConfig() {
      this.$allrequest.alipay.getAppointmentConfig({},true).then(res => {
        if (!res.code) {
          this.routeData.description = res.data.description;
          if (res.data.result) {
            this.routeData = { ...this.routeData, ...res.data };
            this.gotoResult(this.routeData);
            return;
          }
          let data = res.data;
          let arr = [];
          for (let i = 0; i < res.data.person; i++) {
            arr.push(i + 1);
          }
          this.configData = {
            peopleConfig: arr,
            orderTimes: data.time,
            orderDay: this.orderDayDeal(),
          };
    
          this.showAppointPopup = true;
        }
      });
    },
    getNowFormatDate(timeStamp, type = 'full') {
      let date = new Date(timeStamp);
      let seperator1 = '-';
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
      }
      let currentdate =
        date.getFullYear() + seperator1 + month + seperator1 + strDate;
      if (type == 'toDay') {
        currentdate = month + seperator1 + strDate;
      }
      return currentdate;
    },
    // 处理配置时间数据
    orderDayDeal() {
      let arr = [];
      let date = new Date();
      let weekTrans = new Array('日', '一', '二', '三', '四', '五', '六');
      let dayTrans = ['今天', '明天'];
      for (let i = 0; i < 7; i++) {
        let obj = {};
        let timeStamp = 1000 * 60 * 60 * 24 * i + date.getTime();
        if (i <= 1) {
          obj['day'] = dayTrans[i];
        } else {
          obj['day'] = this.getNowFormatDate(timeStamp, 'toDay');
        }

        obj['time'] = this.timestampToTime(timeStamp);
        let time = this.timestampToTime(timeStamp);
        let nextDay = new Date(time);
        obj['week'] = '周' + weekTrans[nextDay.getDay()];
        arr.push(obj);
      }
      return arr;
    },
    // 时间戳转时间
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D;
    },
    // 预约选择弹框点击确认按钮回调事件
    handleConfirmBtn(e) {
      this.appointData = e.data;
      this.showAppointPopup = false;
      this.from = '';
    },
    // 关闭预约选择弹框
    closePopup() {
      // if (this.from == "home") {
      //   this.$utils.goBack();
      // } else {
      this.showAppointPopup = false;
      // }
    },
    // 点击修改
    editAppointMsg() {
      // this.from = "botton";
      this.showAppointPopup = true;
    },
    // 监听验证码文案变化
    codeChange(text) {
      this.tips = text;
    },
    // 获取验证码
    getCode() {
      if (!this.$utils.isMobile(this.form.mobile)) {
        this.$refs.uToast.show({
          title: '请填写正确的手机号码！',
          type: 'error',
        });
        return;
      }
      if (this.$refs.uCode.canGetCode) {
        this.$allrequest.alipay
          .getPhoneCode({
            mobile: this.form.mobile,
          },true)
          .then(res => {
            if (!res.code) {
              // 这里此提示会被this.start()方法中的提示覆盖
              this.$u.toast('验证码已发送');
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            }
          });
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },

    // 提交预约信息
    submitAppoint() {
      let [sTime, eTime] = this.appointData.time.split('-');
      let start_time = this.appointData.day.time + sTime;
      let end_time = this.appointData.day.time + eTime;
      this.$allrequest.alipay
        .submitAppoint({
          ...this.form,
          start_time,
          end_time,
          person: this.appointData.people,
        },true)
        .then(res => {
          if (!res.code) {
            this.routeData = { ...this.routeData, ...res.data };
            this.gotoResult(this.routeData);
          } else {
            if (res.msg) {
              uni.showToast({
                title: res.msg,
                duration: 2000,
              });
            }
          }
        });
    },
    // 跳转至结果页
    gotoResult(data) {
      let resultData = JSON.stringify(data);
      this.$utils.toUrl(
        `/alipay-order/appointment/result?data=${resultData}`,
        'redirectTo'
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;
  font-family: PingFang SC;
  padding-bottom: 22.67vw;

  .order-form {
    width: 93.6vw;
    padding: 4vw 3.2vw;
    background: #ffffff;
    border-radius: 2.13vw;
    margin: 3.2vw auto 0;
    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 4.27vw;
      margin-bottom: 4vw;

      /deep/.u-input__input {
        padding-left: 0;
      }
    }
    .form-item:last-child {
      margin-bottom: 0;
    }
    .order-msg {
      flex: 1;
      font-size: 3.73vw;
      font-weight: 600;
      color: #191919;
    }
    .edit-order {
      width: 8vw;
      font-size: 3.73vw;
      font-weight: 600;
      color: #1fb6fd;
      text-align: ri;
    }
    .code-btn {
      font-size: 3.2vw;

      font-weight: 400;

      color: #1fb6fd;
    }
  }

  .remark-box {
    width: 93.6vw;
    padding: 4vw 3.2vw;
    background: #ffffff;
    border-radius: 2.13vw;
    margin: 3.2vw auto 0;
  }

  .discount-box {
    width: 93.6vw;
    padding: 4vw 3.2vw;
    background: #ffffff;
    border-radius: 2.13vw;
    margin: 3.2vw auto;
    view {
      font-size: 3.73vw;
      font-weight: 600;
      color: #191919;
    }
    text {
      margin-top: 2.13vw;
      font-size: 3.2vw;
      font-weight: 400;
      line-height: 5.33vw;
      color: #666666;
      display: block;
    }
  }

  .foot-section {
    width: 100%;
    height: 22.67vw;
    background: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 111;
    display: flex;
    justify-content: center;
    align-items: center;
    .foot-btn {
      width: 91.47vw;
      height: 10.93vw;
      background: #1fb6fd;
      border-radius: 8vw;
      text-align: center;
      line-height: 10.93vw;
      font-size: 4.27vw;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
